<template>
    <vk-data-dialog v-model="value.show" :title="page.title" :top="page.top" :width="page.width" mode="form"
        max-height="800px" width="860px" @open="onOpen" @closed="onClose" :close-on-click-modal="true">
        <div id="tableId-1" ref="printContent">
            <div v-for="(v, i) in value.printData" :key="i" style="page-break-after: always">
                <div style="width: 850px; align-content: center">
                    <div style="z-index: -1; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center;justify-content: start; -ms-flex-direction: column; flex-direction: column" :style="{
                            height: getPageHeight(v) + 'px'
                        }">
                        <!--!封面页开始-->
                        <!--!封面页结束-->
                        <div>
                            <div style="display: flex; width: 100%; font-family: 宋体; margin-top: 10px">
                                <div style="width: 100px">
                                    <img src="@/static/quanan-log.png" height="70px" width="80px" />
                                </div>
                                <div style="display: flex; flex-direction: column; justify-content: center">
                                    <div>
                                        <span
                                            style="font-size: 28px; color: black; font-weight: bold; line-height: 32px; display: ruby-text;flex-wrap: nowrap; width: 100%">广 东 全 安 检 测 科 技 有 限 公 司</span>
                                    </div>
                                    <div style="color: black; font-size: 20px; font-weight: bold">
                                        GuangDong QuanAn Testing Technology Co.,Ltd</div>
                                </div>
                            </div>
                        </div>
                        <div
                            style="width: 95%; padding: 0px; background-color: black; margin-top: 3px; font-weight: bold; border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 2px">
                        </div>
                        <div
                            style="width: 95%; padding: 0px; background-color: black; margin-top: 3px; font-weight: bold; font-weight: bold; border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 1px">
                        </div>
               <div style=" position: relative; width: 95%; font-family: 宋体;">
                            <div
                                style="display: inline-block; position: absolute; left: 50%; transform: translateX(-50%);">
                                <div style="font-size: 30px !important; color: black; margin-top: 10px;">
                                    检 测 报 告
                                </div>
                                <div style="font-size:30px; color: black; margin-top: 30px; font-family: 宋体;">
                                    TEST REPORT
                                </div>
                            </div>
                            <div style="display: inline-block; margin-left: 79%; margin-top: 5px;">
                                <vue-qr :logoSrc="logourl" :margin="3"
                                    :text="`http://www.gdquanan.com/#/pages/qr_info/aq?no=${v.no}`" :size="130"></vue-qr>
                                <div style=" text-align: center; font-size: 10px;line-height: 12px; font-family: 宋体;">
                                    扫描二维码辨别报告真伪
                                </div>
                            </div>
                        </div>
                        <div style="width: 95%">
                            <div style="margin-bottom: 5px; display: flex; justify-content: space-between">
                                <div style="display: flex; justify-content: start">
                                    <span
                                        style="color: black; font-weight: bold; font-size: 16px; font-family: 黑体">客户信息：</span>
                                </div>

                                <div style="width: 300px; text-align: right">
                                    <span style="font-weight: bold; font-size: 16px; font-family: 黑体">报告编号：</span>
                                    <span style="font-size: 16px; font-family: 宋体; color: black">{{ v.no || '' }}</span>
                                </div>
                            </div>
                            <div>
                                <table class="daying"
                                    style="border-spacing: 0; width: 100%; border-collapse: collapse; font-family: 宋体; color: #000">
                                    <tr>
                                        <td align="center"
                                            style="width: 15%; height: 30px; border: 1px solid #000"><span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">委托单位</span>
                                        </td>
                                        <td align="center"
                                            style="width: 35%; border: 1px solid #000">
                                            <span style="font-size: 14px">{{ v.client_name }}</span>
                                        </td>
                                        <td align="center" style="width: 15%; border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">送样单位</span>
                                        </td>
                                        <td align="center" style="width: 35%; border: 1px solid #000">
                                            <span style="font-size: 14px">{{ v.submitUser }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center" style="height: 30px; border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">收样日期</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000">
                                            <span style="font-size: 14px">{{ vk.pubfn.timeFormat(v.detect_time,
                                                'yyyy年MM月dd日') }}</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">样品状态</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000">
                                            <span style="font-size: 14px">{{ v.sample_status || '袋装 鲜样' }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center" style="height: 30px; border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测日期</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000">
                                            <span style="font-size: 14px">{{ vk.pubfn.timeFormat(v.detect_time,
                                                'yyyy年MM月dd日') }}</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测环境</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000">
                                            <span style="font-size: 14px">符合要求</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div style="width: 95%; margin-top: 8px">
                            <div style="margin-bottom: 3px">
                                <span style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">样品信息：</span>
                            </div>
                            <div>
                                <table class="daying"
                                    style="border-spacing: 0; width: 100%; border-collapse: collapse; font-family: 宋体; color: #000">
                                    <tr>
                                        <td align="center"
                                            style="width: 15%; height: 30px; border: 1px solid #000"><span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">样品名称</span>
                                        </td>
                                        <td align="center"
                                            style="width: 35%; border: 1px solid #000">
                                            <span style="font-size: 14px">{{ v.sample_list && v.sample_list.length > 0 ? v.sample_list[0].samplename : '' }}</span>
                                        </td>
                                        <td align="center" style="width: 15%; border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">送样规格</span>
                                        </td>
                                        <td align="center" style="width: 35%; border: 1px solid #000">
                                            <span style="font-size: 14px">{{ v.sample_list && v.sample_list.length > 0 ? (v.sample_list[0].spec || 'g') : '' }}</span>
                                        </td>
                                    </tr>
                                    <!-- <tr>
                                        <td align="center" style="height: 30px; border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">样品类别</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000">
                                            <span style="font-size: 14px">水产类</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">送样数量</span>
                                        </td>
                                        <td align="center" style="border: 1px solid #000">
                                            <span style="font-size: 14px">{{ v.sample_list && v.sample_list.length > 0 ? (v.sample_list[0].quantity || '250g') : '250g' }}</span>
                                        </td>
                                    </tr> -->
                                </table>
                            </div>
                        </div>
                        <div
                            style="align-items: center; font-size: 16px; font-weight: bold; margin-top: 8px; margin-bottom: 4px; font-family: 宋体; color: black">
                            检 测 结 果</div>
                        <div style="width: 95%">
                            <div>
                                <table class="daying"
                                    style="border-spacing: 0; width: 100%; border-collapse: collapse; font-family: 宋体; color: #000">
                                    <tr style="height: 30px">
                                        <td align="center" width="8%" style="border: 1px solid #000"><span
                                                style="font-weight: bold; font-size: 14px; font-family: 黑体">序号</span>
                                        </td>
                                        <td align="center" width="18%" style="border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测项目</span>
                                        </td>
                                        <td align="center" width="18%" style="border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测方法</span>
                                        </td>
                                        <td align="center" width="14%" style="border: 1px solid #000"><span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">检测结果</span>
                                        </td>
                                        <td align="center" width="14%" style="border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">标准要求</span>
                                        </td>
                                        <td align="center" width="14%" style="border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">计量单位</span>
                                        </td>
                                        <td align="center" width="14%" style="border: 1px solid #000">
                                            <span
                                                style="color: black; font-weight: bold; font-size: 14px; font-family: 黑体">单项判定</span>
                                        </td>
                                    </tr>

                                    <!-- 动态行高和字体大小 -->
                                    <tr v-for="(detail, index) in getsubList(v.sample_list, 1)" :key="index"
                                        :style="{ height: calcRowHeight(v.sample_list.length) + 'px', fontSize: calcFontSize(v.sample_list.length) + 'px' }">
                                        <td align="center" style="border: 1px solid #000">{{ index + 1 }}
                                        </td>
                                        <td align="center" style="border: 1px solid #000">{{
                                            detail.detection_category }}</td>
                                        <td align="center" style="border: 1px solid #000">{{
                                            detail.detection_standard }}</td>
                                        <td align="center" style="border: 1px solid #000">
                                            {{ detail.result }}
                                        </td>
                                        <td align="center" style="border: 1px solid #000">{{
                                            detail.standardRequir||'不得检出' }}</td>
                                        <td align="center" style="border: 1px solid #000">
                                            {{ detail.unit || 'μg/kg' }}
                                        </td>
                                        <td align="center" style="border: 1px solid #000"
                                            :style="{ 'font-size': '14px' }">
                                            {{ detail.yxresult === '阴性' ? '合格' : (detail.yxresult || '合格') }}
                                        </td>
                                    </tr>
                                </table>

                                <table
                                    style="color: black;width: 100%; margin-top: 6px; font-size: 13px; font-family: 宋体;border-collapse: collapse;">
                                    <tr>
                                        <td rowspan="2" align="center" width="12%"
                                            style="border: 1px solid #000; padding: 6px;">
                                            <span style="font-weight: bold; font-family: 黑体">检测结论</span>
                                        </td>
                                        <td rowspan="2" width="88%"
                                            style="border: 1px solid #000; padding: 6px; text-align: left; position: relative;">
                                            <div style="min-height: 90px; display: flex; flex-direction: column; justify-content: space-between;">
                                                <!-- 左上角：见检验检测结果表 -->
                                                <div style="text-align: left; font-size: 13px; font-family: 宋体;">
                                                    见检验检测结果表
                                                </div>
                                                <!-- 右下角：检验检测机构盖章 + 印章图片 -->
                                                <div style="display: flex; justify-content: flex-end; align-items: center; margin-top: 8px; position: relative;">
                                                    <div style="position: relative; display: inline-block;">
                                                        <span style="font-size: 13px; font-family: 宋体; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-weight: bold;">检验检测机构盖章</span>
                                                        <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/b79544a0-ae47-4ab4-b62f-8ca500865b90.png"
                                                            width="120px" height="120px" style="display: block; position: relative; z-index: 1;">
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <table
                                    style="color: black;width: 100%; font-size: 13px; font-family: 宋体;border-collapse: collapse;">
                                    <tr>
                                        <td align="center" width="12%"
                                            style="border: 1px solid #000; padding: 6px; border-top: none;">
                                            <span style="font-weight: bold; font-family: 黑体">备注</span>
                                        </td>
                                        <td width="88%"
                                            style="border: 1px solid #000; padding: 6px; text-align: left; border-top: none;">
                                         该检测数据只对当次来样负责，数据仅供参考，不具对社会的证明作用。
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div
                                style="text-align: left; padding: 4px; font-family: 宋体;color: #000; font-size: 11px; line-height: 14px;">
                                <span style="font-weight: bold; font-family: 黑体">注：#为检出值，单位为 ppb，1ppb=1 μg/kg检测结果：阴性（未检出）；阳性（检出）。</span>
                            </div>
                        </div>

                         <div style="display: flex;margin-top: 15px; flex-direction: row; justify-content: space-between; width: 95%;">
                            <div
                                style="width: 33%; font-size: 16px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                                <div>检测人:</div>
                                <div style="position: absolute; left: 28%; top: -80%;"><span>
                                        <img v-if="$fn.isNotNull(v.detection_user_info.sign_image)" width="100px"
                                            height="40px" :src="v.detection_user_info.sign_image">
                                    </span>
                                </div>
                            </div>
                            <div
                                style="width: 33%; font-size: 16px; font-weight: bold; font-family: 黑体; display: flex; position: relative;">
                                <div>审核人:</div>
                                <div style="position: absolute; left: 28%; top: -60%;">
                                    <img src="https://mp-5fe77170-8511-415d-8f6e-02d647d2979a.cdn.bspapp.com/cloudstorage/097aaf25-357c-44d6-8325-27a73b5efde6.png"
                                        width="100px" height="40px">
                                </div>
                            </div>
                            <div style="width: 200px;"><span
                                    style="font-size: 16px; font-weight: bold; font-family: 黑体;">签发日期:</span> <span
                                    style="font-family: 宋体; font-size: 16px; color: black;">{{
                                        vk.pubfn.timeFormat(v.detect_time, "yyyy年MM月dd日") }}</span></div>
                        </div>

                        <div style="margin-top: auto; width: 95%; padding-bottom: 8px; padding-top: 8px">
                            <div style="text-align: left; padding: 4px; font-family: 宋体; color: #000;">
                                <div style="font-weight: bold; font-family: 黑体; font-size: 12px; margin-bottom: 3px;">报告编制说明：</div>
                                <table style="border-spacing: 0; width: 100%; border-collapse: collapse; font-family: 宋体; color: #000">
                                    <tr>
                                        <td align="left" style="width: 50%; padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                            1、本报告未经本实验室书面批准，不得部分复制。
                                        </td>
                                        <td align="left" style="width: 50%; padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                            2、本报告无本公司"检验检测专用章"无效。
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                            3、是到本报告未盖章或对报告有异议，本公司不承担其信息准确性的责任。
                                        </td>
                                        <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                            4、本报告无主检人、审核人签字无效，报告涂改、增删无效。
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                            5、对本检测报告若有异议，应于报告出具之日起五日内向本公司提出，或者到有资质的权威检测机构进行验证，逾期不予受理。
                                        </td>
                                        <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                            6、对于来样检样品，本公司仅对本次送检样品负责。
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                            7、本报告未经本公司同意不得用于广告、产品宣传等商业行为。
                                        </td>
                                        <td align="left" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                            8、对本报告若有异议，请于报告签出之日起一日内向本公司提出，逾期不予受理。
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="left" colspan="2" style="padding: 2px 4px; border: 0.5px solid #999; font-size: 10px; line-height: 14px;">
                                            9、特殊信息的填写实际由委托方负责。
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div
                                style="padding: 0px; background-color: black; margin-top: 3px; font-weight: bold; border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 2px">
                            </div>
                            <div
                                style="padding: 0px; background-color: black; margin-top: 5px; font-weight: bold; border-bottom-color: #000; border-bottom-style: solid; border-bottom-width: 1px">
                            </div>
                            <div style="display: flex; align-content: space-between;justify-content: space-between; color: #606266; margin-top: 10px">
                                <div style="font-size: 10px; font-family: 黑体;">广 东 全 安 检 测 科 技 有 限 公 司</div>
                                <div
                                    style="margin-left: 15%; font-size: 12px; font-family: 黑体; align-content: flex-end; color: #606266">
                                    地址：广州市白云区永平街永泰新村和街七巷22号之四5楼502房</div>
                            </div>
                            <div style="display: flex; width: 95%;justify-content: space-between;">
                                <div style="font-size: 10px; font-family: 黑体;color: #606266;">GuangDong QuanAn Testing Technology Co.,Ltd</div>
                                <div style="margin-left: 9.5%; font-size: 10px; font-family: 黑体;color: #606266;">
                                    客服电话：020-32784686</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <template v-slot:footer="{ close }">
            <!--这里是底部插槽-->
            <el-button @click="print2">打 印</el-button>
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="close">确 定</el-button>
        </template>
    </vk-data-dialog>
</template>

<script>
import VueQr from 'vue-qr';
import printJS from 'print-js';
import { uniq } from 'lodash';
import printbase from '@/mixins/printbase.js';
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
    components: {
        VueQr
    },
         mixins: [],
    props: {
        value: {
            Type: Object,
            default: function () {
                return {
                    show: false,
                    printData: []
                };
            }
        }
    },
    data: function () {
        // 组件创建时,进行数据初始化
        return {
            page: {
                title: '水产检测报告打印',
                submitText: '确定',
                cancelText: '关闭',
                showCancel: true,
                top: '3vh',
                width: '860px'
            },
            form1: {},
            logourl: require('@/static/logo.png')
        };
    },
    mounted() {
        that = this;

        that.init();
    },
    methods: {
        // 初始化
        init() {
            let { value } = that;

            //that.$emit("input", value);
        },
        handleImport() {
            this.$refs.file.click();
        },
        // 监听 - 页面打开
        onOpen() {
            that = this;
            let { item = {} } = that.value;
            that.form1.props.show = true;
        },
        // 监听 - 页面关闭
        onClose() { },
        // 监听 - 提交成功后
        onFormSuccess() {
            that.value.show = false; // 关闭页面
            that.$emit('success');
        },

        print2() {
            printJS({
                printable: `tableId-1`, // 'printFrom', // 标签元素id
                type: 'html',
                style: '@page {margin:1 1mm;font-size:7px} .daying {border-spacing:0;width:100%;border-collapse:collapse;font-family:宋体;color:#000} .daying td {border:1pxsolid#000;height:15px} .daying td label {font-size:14px} .daying td span{font-size:16px}', // 可选-打印时去掉眉页眉尾
                scanStyles: false,
                ignoreElements: [], // ['no-print']
                properties: null
            });
            let _updateIds = this.value.printData.map(x => x._id);
            vk.callFunction({
                url: 'admin/testing/detection-form/sys/update_print_count',
                data: {
                    _ids: _updateIds
                },
                success: data => { }
            });
        },
        // 根据 sample_list 长度计算行高
        calcRowHeight(length) {
            return 30;
        },
        // 根据 sample_list 长度计算字体大小
        calcFontSize(length) {
            return 14;
        },
        getsubList(list, index) {
            // 水产报告通常项目不多，直接返回全部
            return list;
        },
        getPageHeight(v) {
            // 水产报告固定高度
            return 1200;
        },
        uniq(list) {
            return uniq(list)
        }

    },
    // 监听属性
    watch: {

    },
    // 计算属性
    computed: {

    }
};
</script>

<style lang="scss" scoped>
// .daying {
//     border-spacing: 0;
//     width: 100%;
//     border-collapse: collapse;
//     font-family: 宋体;
//     color: #000
// }

// .daying td {
//     border: 1px solid #000;
//     height: 15px
// }

// .daying td label {
//     font-size: 14px
// }

// .daying td span {
//     font-size: 16px
// }

.page-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.qrcode-cell {
    width: 150px;
    text-align: center;
    vertical-align: middle;
}

.qrcode {
    width: 120px;
    height: 120px;
}
</style>
